<template lang="pug">
div()
  div(flex="dir:left")
    div(flex-box="1")
      el-form(size="small")
        el-form-item
          el-button-group
            submit-button(type="danger",:loading="deleting",@click="deleteInfos",size="small")  
              i(class="el-icon-delete") 
              span 删除
          span &nbsp;
          el-dropdown
            el-button(type="default",size="small")
              i(class="el-icon-setting")
              span 设置
              i(class="el-icon-arrow-down el-icon--right")
            el-dropdown-menu(slot="dropdown")
              el-dropdown-item(@click.native="goSetting('/insulin/index')")
                i(class="el-icon-document")
                span 胰岛素泵设置
              el-dropdown-item(@click.native="goSetting('/insulin/model')")
                i(class="el-icon-document")
                span 胰岛素型号设置
          span &nbsp;
          el-popover(placement="bottom",width="350",trigger="click")
            div
              el-input(:value="h5ShareUr",id="pump-sale-search-url",:disabled="true")
                el-button(slot="append",@click="copyH5") 
                  d2-icon(name="copy")
                  span &nbsp;复制
            el-button(slot="reference") 
              i(class="el-icon-share")
              span H5链接

    div(flex-box="2")
      el-form(:model="filter",size="small",@submit.native.prevent)
        el-form-item
          el-input(v-model="filter.phoneOrPumpNo",placeholder="电话号码或泵编号",type="text",@change="getPumpSaleInfos",clearable)
    

  el-table(:data="paged.items",:show-overflow-tooltip="true",border,@selection-change="selectionChange")
      el-table-column(type="selection",width="50")
      el-table-column(prop="customerName",label="姓名",width="120px")
      el-table-column(prop="pumpNo",label="品牌-型号-编号",width="200px")
          template(slot-scope="scope") 
              span {{scope.row.pumpBrandName}}-
              span {{scope.row.pumpModelName}}-
              span {{scope.row.pumpNo}}
      el-table-column(prop="phone",label="电话",width="120px",align="center")
      el-table-column(label="购买日期",width="100px",align="center")
          template(slot-scope="scope") {{scope.row.purchaseAt | format('YYYY-MM-DD')}}
      el-table-column(label="有效时间",width="220px",align="center")
          template(slot-scope="scope") 
              span {{scope.row.warrantyStart | format('YYYY-MM-DD')}}
              span &nbsp;至&nbsp;
              span {{scope.row.warrantyEnd | format('YYYY-MM-DD')}}
      el-table-column(label="",align="center",fixed="right")
        template(slot-scope="scope")
          el-button(type="text",@click="editClick(scope.row)")
            i(class="el-icon-edit")
            span 编辑
          el-button(type="text",@click="toH5(scope.row)")
            i(class="el-icon-share")
            span H5链接
      

  awesome-pagination(:total="paged.totalCount",:page="page",@change="getPumpSaleInfos")

</template>

<script>
import Vue from "vue";
import { AwesomePagination } from "awesome-element-ui";
Vue.use(AwesomePagination);

import dayjs from "dayjs";
import axios from "@/plugin/axios";
import PageList from "@/mixins/PageList";
import util from "@/libs/util";

export default {
  name: "pump-sale-info-list",
  mixins: [PageList],
  data() {
    return {
      paged: {},
      filter: {},
      deleting: false
    };
  },
  computed: {
    h5ShareUr() {
      let routeData = this.$router.resolve({ path: "/h5/PumpInfoSearch" });
      return `${location.protocol}//${location.host}${location.pathname}${routeData.href}`;
    }
  },
  methods: {
    getPumpSaleInfos() {
      this.querying = true;
      axios({
        method: "post",
        url: "/pumpSaleInfo/getPumpSaleInfos",
        data: { page: this.page, filter: this.filter }
      })
        .then(paged => this.getPumpSaleInfoSuccess(paged))
        .catch(() => (this.querying = false));
    },
    getPumpSaleInfoSuccess(paged) {
      this.querying = false;
      this.paged = paged;
    },
    deleteInfos() {
      this.isDeleteConfirm()
        .then(() => {
          this.deleting = true;
          axios({
            method: "post",
            url: "PumpSaleInfo/delete",
            data: { ids: this.selectedIds }
          })
            .then(() => {
              this.getPumpSaleInfos();
              this.deleting = false;
            })
            .catch(() => (this.deleting = false));
        })
        .catch(() => {});
    },
    editClick(row) {
      this.$emit("edit", row);
    },
    goSetting(path) {
      this.$router.push(path);
    },
    toH5(row) {
      let routeData = this.$router.resolve({
        path: "/h5/PumpInfoSearch",
        query: { q: row.pumpNo }
      });
      window.open(routeData.href, "_blank");
    },
    copyH5() {
      util
        .copy("pump-sale-search-url")
        .then(() => this.$message({ message: "复制成功", type: "success" }));
    }
  },
  filters: {
    format(val, format) {
      if (!format) return null;
      return dayjs(val).format(format);
    }
  },
  created() {
    this.getPumpSaleInfos();
  }
};
</script>
